<template>
	<view class="page">
		<u-sticky :offsetTop="0">
			<view class="page-top flex-between">
				<view class="number-box">
					{{count}}件
				</view>
				<view class="manager-box flex" @click="show_manager = !show_manager">
					<image class="icon" src="@/static/my/setting.png" mode=""></image>
					<text>管理</text>
				</view>
			</view>
		</u-sticky>

		<view class="page-ctx">
			<view class="box-product">
				<view class="product-list">
					<view class="product-item flex" v-for="(item,index) in records" :key="index">
						<view class="icon-box flex-center" v-if="show_manager" @click="doProductToggleSelect(item,index)">
							<image v-if="item.is_select" src="@/static/common/radio1.png" mode=""></image>
							<image v-else src="@/static/common/radio0.png" mode=""></image>
						</view>
						<view class="poster-box">
							<image :src="item.thumb" mode=""></image>
						</view>
						<view class="info-box">
							<view class="title">
								{{item.title}}
							</view>
							<view class="guige">
								{{item.keyVals}}
							</view>
							<view class="price">
								<text class="huobi">￥</text>
								<text class="value">{{item.priceSale}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="load-more-box" style="margin-top: 50rpx;">
				<u-loadmore :status="loadmore_status" />
			</view>
		</view>

		<w_fill_block height="160"></w_fill_block>


		<view class="page-foot" v-if="show_manager">
			<view class="safe-fixed-bottom">
				<view class="manager-box flex-between">
					<view class="select-all-box flex" @click="doCartToggleSelectAll()">
						<view class="icon-box">
							<image v-if="is_select_all" src="@/static/common/radio1.png" mode=""></image>
						</view>
						<view class="select-text">
							全选
						</view>
					</view>
					<view class="btns flex-center">
						<view class="btn flex-center btn-buy" @click="doCartDeleteSelect()">
							删除
						</view>
					</view>
				</view>
			</view>
		</view>




		<view class="modal-wrap">
			<u-popup :show="show_pop" :overlay="true" mode="center" :closeable="false" :closeOnClickOverlay="true"
				@close="onClose" @open="onOpen" :safeAreaInsetBottom="true" round=16>
				<view class="cus-center-pop-box">
					<view class="pop-title">
						提示
					</view>

					<view class="pop-body">
						<view class="tip">
							<view class="tip-text">
								确定删除所选商品吗？
							</view>
						</view>
					</view>

					<view class="pop-foot">
						<view class="btns flex-between">
							<view class="btn-qx flex-center" @click="show_pop = false">
								取消
							</view>
							<view class="btn-qr flex-center" @click="confrimDeleteFav()">
								确认
							</view>
						</view>
					</view>
				</view>
			</u-popup>

		</view>



	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				records: [],
				pagination: {
					page: 1,
					pageNum: 10
				},
				count: 0,
				loadmore_status: 'loadmore', //loadmore  / loading / nomore


				show_manager: false, //是否展示购物车管理

				show_pop: false,
			}
		},

		computed: {
			//商品
			records_select() {
				return this.records.filter(v => v.is_select)
			},
			has_records_select() {
				return this.records_select.length > 0
			}
		},


		onLoad() {
			this.setView()
		},
		onShow() {

		},
		onHide() {},

		onPullDownRefresh() {

		},
		onReachBottom() {
			this.loadMore()
		},

		methods: {
			loadMore() {
				if (this.loadmore_status == 'loadmore') {
					this.loadmore_status = 'loading'
					this.pagination.page++;
					this.query_record();
				}
			},
			initQuery() {
				this.records = [];
				this.pagination.page = 1;
				this.coupon_loadmore_status = 'loadmore'
			},

			setView() {
				this.query_record()
			},

			query_record() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'product_plist',
						...this.pagination,
						// shoucang: 1,
					},
				}).then(res => {
					if (res.code == 200) {
						this.count = res.data.count
						let list = res.data.list;
						list.forEach(v => {
							v.is_select = false;
						})
						this.records = this.records.concat(list);
						this.loadmore_status = this.count > this.records.length ? 'loadmore' : 'nomore';
					}
				})
			},

			handle_favCancel(item) {
				this.$log('handle_favCancel', item)
				let index = this.records.findIndex(v => v.id == item.id)
				this.records.splice(index, 1)
			},




			// 切换产品勾选
			doProductToggleSelect(item, index) {
				item.is_select = !item.is_select
				this.records.splice(index, 1, item)

				//
				if (this.records.some(v => !v.is_select)) {
					this.is_select_all = false
				} else {
					this.is_select_all = true
				}
			},
			// 购物车切换股癣
			doCartToggleSelectAll() {
				this.is_select_all = !this.is_select_all

				this.records.forEach(v => {
					v.is_select = this.is_select_all
				})
			},
			doCartDeleteSelect() {
				if (!this.has_records_select) {
					this.$alert('请先勾选要删除的产品')
					return
				}
				// this.$refs.cart_delete_product_pop.init()
				this.show_pop = true;
			},

			confrimDeleteFav() {
				let guige_ids = this.records_select.map(v => v.inventoryId).join(',')
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'product_bathDelOperate',
						productIds: guige_ids, //产品规格id(多个用,分开)
						operateType: 1, //1-关注 2-足迹
					},
				}).then(res => {
					if (res.code == 200) {
						this.records = this.records.filter(v => !v.is_select);
						this.show_manager = false;
					}
				})
			},



		}
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	.page-top {
		height: 88rpx;
		background: #FFFFFF;
		padding: 0 32rpx;

		.number-box {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
		}

		.manager-box {
			image {
				width: 32rpx;
				height: 32rpx;
			}

			text {
				margin-left: 16rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #164782;
			}
		}
	}

	.page-ctx {
		padding: 0 20rpx;
	}

	.box-product {
		margin-top: 30rpx;
	}


	.product-item {
		margin-bottom: 16rpx;
		padding: 32rpx 24rpx;
		padding-left: 0;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.icon-box {
			width: fit-content;
			// height: 40rpx;
			padding: 0 24rpx;
			align-self: stretch;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.icon-box+.poster-box {
			margin-left: 0rpx;
		}

		.poster-box {
			margin-left: 24rpx;
			width: 176rpx;
			height: 176rpx;
			border-radius: 10rpx;
			overflow: hidden;

			image {
				width: 176rpx;
				height: 176rpx;
			}
		}

		.info-box {
			flex: 1;
			overflow: hidden;
			padding-left: 24rpx;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
			}

			.guige {
				margin-top: 10rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #B3B9C9;
			}

			.price {
				margin-top: 40rpx;

				.huobi {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #000000;
				}

				.value {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
				}
			}
		}
	}






	// 底部操作
	.page-foot {
		.manager-box {
			width: 100%;

			.select-all-box {
				height: 80rpx;
				flex: 1;
				// overflow: hidden;

				.icon-box {
					width: 40rpx;
					height: 40rpx;
					border: 2rpx solid #E1E3E8;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.select-text {
					margin-left: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
				}
			}


			.btns {
				.btn {
					width: 224rpx;
					height: 80rpx;
					background: #CB0011;
					border-radius: 60rpx 60rpx 60rpx 60rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
	}





	.cus-center-pop-box {
		padding: 24rpx;
		padding-top: 60rpx;
		padding-bottom: 60rpx;
		width: 686rpx;
		min-height: 300rpx;
		background: #FFFFFF;
		border-radius: 32rpx;

		.pop-title {

			text-align: center;
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;
		}


		.pop-body {
			margin-top: 30rpx;
			padding: 0 60rpx;

			.tip {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
				line-height: 1.6;
				text-align: center;

				.tip-text {

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					line-height: 1.6;
					text-align: center;

					&+.tip-text {
						margin-top: 20rpx;
					}
				}
			}

		}


		.pop-foot {
			margin-top: 60rpx;

			.btns {

				.btn-qx {
					width: 306rpx;
					height: 80rpx;
					background: #F8F8F8;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
				}

				.btn-qr {
					width: 306rpx;
					height: 80rpx;
					background: #CB0011;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;

				}
			}

		}
	}
</style>